<template>
	<el-card class="category" style="margin-bottom: 10px">
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="一级分类">
				<el-select v-model="category1Id" placeholder="请选择">
					<el-option
						:label="c1.name"
						:value="c1.id"
						v-for="c1 in categoryStore.category1List"
						:key="c1.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="二级分类">
				<el-select v-model="category2Id" placeholder="请选择">
					<el-option
						:label="c2.name"
						:value="c2.id"
						v-for="c2 in categoryStore.category2List"
						:key="c2.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="三级分类">
				<el-select v-model="category3Id" placeholder="请选择">
					<el-option
						:label="c3.name"
						:value="c3.id"
						v-for="c3 in categoryStore.category3List"
						:key="c3.id"
					/>
				</el-select>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script lang="ts">
export default {
	name: 'CategorySelector',
}
</script>

<script lang="ts" setup>
import { reqGetCategory1ListData } from '@/api/product/category'
import { onMounted, computed } from 'vue'
import { useCategoryListStore } from '@/stores/categoryList'

const categoryStore = useCategoryListStore()

onMounted(() => {
	categoryStore.getCategory1ListData()
})
// 使用计算属性精简一级分类
const category1Id = computed<number>({
	get() {
		return categoryStore.category1Id as number
	},
	set(val) {
		categoryStore.getCategory2ListData(val)
	},
})
// 使用计算属性精简二级分类
const category2Id = computed<number>({
	get() {
		return categoryStore.category2Id as number
	},
	set(val) {
		categoryStore.getCategory3ListData(val)
	},
})
// 使用计算属性精简三级分类
const category3Id = computed<number>({
	get() {
		return categoryStore.category3Id as number
	},
	set(val) {
		categoryStore.setCategory3Id(val)
	},
})
const onSubmit = () => {
	console.log('submit')
}
</script>

<style scoped lang="scss">
.category {
	.el-card__body {
		.el-form-item {
			margin-bottom: 0;
		}
	}
}
</style>
